import React, { Component } from 'react'

export default class MyCpt extends Component {
  render() {
    return (
      <div>
        <h4>
          MyCpt - 组件的定义和规则
        </h4>
        <Myone></Myone>
      </div>
    )
  }
}


class Myone extends Component {
  render() {
    return (
      <div>
        <div>
          <h4>MyOne - MyOne</h4>
        </div>
        <div>
          <h4>MyOne - MyOne</h4>
        </div>
        <div>
          <h4>MyOne - MyOne</h4>
        </div>
        <MyFirst></MyFirst>
      </div>
    )
  }
}

class MyFirst extends Component {
  render() {
    return (
      <div>
        <h4>react is so easy</h4>
        <MyLikes></MyLikes>
      </div>
    )
  }
}

function MyLikes() {
  return (
    <div>
      <h4>我的点赞</h4>
      <MyLove></MyLove>
    </div>
  )
}

const MyLove = () => {
  return (
    <div>
      <h4>我的收藏</h4>
      <MyText></MyText>
    </div>
  )
}

const flag = true
class MyText extends Component {
  render() {
    return (
      <div>
        <h4>React 实现 v-if 和 v-for</h4>
        {
          flag ? <h5>123</h5> : <h5>456</h5>
        }
        {
          flag && <h5>我好像在哪见过你</h5>
        }
        <MyList></MyList>
      </div>
    )
  }
}

const arr = ['亚索', '永恩', '艾瑞利亚', '阿卡丽', '卡莎']
class MyList extends Component {
  render() {
    return (
      <div>
        <h4>
          MyList - MyList
        </h4>
        {arr.map((item, index) => {
          return (
            <h5 key={index}>{item} - {index}</h5>
          )
        })}
      </div>
    )
  }
}
